<!-- 地址搜索组件 -->
<template>
    <div class="location-search">
        <el-input v-model="keyword" placeholder="请输入地址关键词" :prefix-icon="Search" clearable @input="handleSearch">
            <template #append>
                <el-select v-model="selectedCity" placeholder="选择城市" style="width: 100px">
                    <el-option label="全国" value="全国" />
                    <el-option label="北京" value="北京" />
                    <el-option label="上海" value="上海" />
                    <el-option label="广州" value="广州" />
                    <el-option label="深圳" value="深圳" />
                </el-select>
            </template>
        </el-input>

        <div class="search-results" v-if="results.length > 0">
            <el-scrollbar height="300px">
                <el-list>
                    <el-list-item v-for="item in results" :key="item.id" @click="handleSelect(item)">
                        <template #default>
                            <div class="result-item">
                                <div class="name">{{ item.name }}</div>
                                <div class="address">{{ item.address }}</div>
                            </div>
                        </template>
                    </el-list-item>
                </el-list>
            </el-scrollbar>
        </div>

        <div class="no-result" v-else-if="keyword && !loading">
            <el-empty description="未找到相关地点" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { searchPlace } from '@/utils/amap'
import { debounce } from 'lodash-es'

const props = defineProps<{
    modelValue?: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
    (e: 'select', value: any): void
}>()

const keyword = ref('')
const selectedCity = ref('全国')
const results = ref<any[]>([])
const loading = ref(false)

// 监听v-model值变化
watch(() => props.modelValue, (newValue) => {
    if (newValue !== keyword.value) {
        keyword.value = newValue || ''
    }
})

// 防抖处理搜索
const handleSearch = debounce(async () => {
    if (!keyword.value) {
        results.value = []
        return
    }

    try {
        loading.value = true
        results.value = await searchPlace(keyword.value, selectedCity.value)
    } catch (error) {
        console.error('搜索地点失败:', error)
        results.value = []
    } finally {
        loading.value = false
    }
}, 300)

// 选择地点
const handleSelect = (item: any) => {
    keyword.value = item.name
    emit('update:modelValue', item.name)
    emit('select', item)
    results.value = []
}
</script>

<style scoped>
.location-search {
    position: relative;
    width: 100%;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    box-shadow: var(--el-box-shadow-light);
    z-index: 1000;
}

.result-item {
    cursor: pointer;
    padding: 8px 12px;
}

.result-item:hover {
    background: var(--el-fill-color-light);
}

.name {
    font-size: 14px;
    color: var(--el-text-color-primary);
    margin-bottom: 4px;
}

.address {
    font-size: 12px;
    color: var(--el-text-color-secondary);
}

.no-result {
    margin-top: 16px;
    text-align: center;
}
</style>